<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
		<script src="js/vue-router-3.0.1.js" charset="utf-8"></script>
		<style>
			.myActiveClass{
				color: #fff;
				background-color: #009966;
				padding: 5px;
				border-radius: 5px;
			}
			.v-enter,.v-leave-to{
				opacity: 0;
				transform: translateX(200px);
			}
			.v-enter-active,.v-leave-active{
				transition: all 0.8s ease; 
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--可以在路由中使用查询字符串给路由传参，且不需要修改路由规则中的path路径 	-->
			<!--<router-link to="/login?id=10&&name=Ajeo">登录</router-link>      传参方式1：query-->
			<!--<router-link to="/login/12/Ajeo">登录</router-link>   传参方式2：params传参-->
			<router-link to="/register">注册</router-link>
			<transition mode="out-in">
			    <router-view></router-view>
			</transition>
		</div>
		<script>
			var login = {
            	//template:'<h1>登录组件-----{{ $route.query.id }}---{{$route.query.name}}</h1>';传参方式1：query
            	//template:'<h1>登录组件---{{ $route.params.id }}---{{$route.params.name}}</h1>',传参方式2：params
            	created(){//组件的生命周期函数，这个阶段data 和 methods已经被初始化好 了
            		console.log(this.$route.params.id)
            		
            	}
            }
            
            var register = {
		      template: '<h1>注册组件</h1>'
		    }
			
			var router = new VueRouter({
				routes:[
					{path:'/',redirect:'/login'},
					{path:'/login/:id/:name',component:login},
					{path:'/register',component:register},
				],
				linkActiveClass:'myActiveclass'
			})
			
			var app = new Vue({
				el:'#app',
				data:{

				},
				methods:{
					
				},
				router:router,
			});
		</script>
	</body>
</html>